<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Docker Whale</title>
  <style>
    body {
      background-color: #BDEDFF;
      padding: 0px;
      margin: 0px;
    }
    #whale {
      position: absolute;
      z-index: -1;
      top: 150px;
      left: 45%;
      margin: auto;
      width: 200px;
      animation: oscil1 4s infinite;
    }
    #waves {
      margin-top:230px;
      width:100%;
      height: 300px;
      opacity: 0.9;
      background-image: url("waves-tiled.png");
      background-repeat: repeat-x;
      animation: scrollX 4s linear infinite
    }
    #sea {
      display: block;
      width:100%;
      padding-bottom: 100%;
      background-color: #2693cc;
    }
    @keyframes oscil1 {
      from {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
      25% {transform: rotate(20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
      50% {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
      75% {transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
      to {transform: rotate(0deg);}
    }
    @keyframes scrollX {
      from {background-position: 0 0;}
      to {background-position: 201px 0;}
    }
  </style>
</head>
<body>
  <img id="whale" src="whale300.png"/>
  <div id="waves"></div>
  <div id="sea"></div>
</body>
</html>
